<template>
    <div class="orderContainer">
        <el-table :data="orderList" v-loading="isLoading">
            <el-table-column prop="orderID" label="订单编号" width="80"></el-table-column>
            <el-table-column prop="title" label="书名"></el-table-column>
            <el-table-column prop="price" label="价格" width="80">
                <template #default="scope">
                    {{ scope.row.price.toFixed(2) }}
                </template>
            </el-table-column>
            <el-table-column prop="name" label="收货人姓名" width="100"></el-table-column>
            <el-table-column prop="telephone" label="收货人联系方式" width="130"></el-table-column>
            <el-table-column prop="orderAddress" label="收货地址"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" @click="sendHandler(scope.row)">发货</el-button>
                    <el-button type="danger" @click="refundHandler(scope.row)">退款</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { userStore } from "@/store/user";
import service from "@/utils/request";
import { ElMessageBox, ElNotification } from "element-plus";

export default {
    name: "OrderSend",
    data() {
        return {
            orderList: [],
            isLoading: true,
        };
    },
    methods: {
        async refresh() {
            this.isLoading = true;
            // 获取未处理订单信息（orderState=2）
            await service({
                method: "get",
                url: `/order/selectByOrderState?orderState=2&payState=1`,
                headers: {
                    token: userStore().token,
                },
            }).then((res) => {
                res.data.data.forEach((item) => {
                    Object.assign(item, ...item.book, item);
                    delete item["book"];
                    // console.log(item);
                });
                this.orderList = res.data.data;
            });
            this.isLoading = false;
        },
        sendHandler(row) {
            ElMessageBox.confirm(`${row.name}的《${row.title}》确认发货吗？`, "警告", {
                type: "warning",
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(() => {
                    service.post(`/order/update`, { ...row, orderState: 3 }).then((res) => {
                        // console.log(res);
                        ElNotification({
                            type: "success",
                            title: "成功",
                            message: `发给${row.name}的《${row.title}》已成功发货`,
                        });
                        this.refresh();
                    });
                })
                .catch(() => {
                    this.refresh();
                });
        },
        refundHandler(row) {
            ElMessageBox.confirm(`${row.name}的《${row.title}》确认退款吗？`, "警告", {
                type: "warning",
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(() => {
                    service.post(`/order/update`, { ...row, orderState: 0, payState: 0 }).then((res) => {
                        // console.log(res);
                        ElNotification({
                            type: "success",
                            title: "成功",
                            message: `${row.name}的《${row.title}》已成功退款`,
                        });
                        this.refresh();
                    });
                })
                .catch(() => {
                    this.refresh();
                });
        },
    },
    beforeMount() {
        this.refresh();
    },
};
</script>

<style scoped></style>
